<template>
  <div id="container">
    <div class="form">
      <table>
        <tr>
          <td>昵称:</td>
          <td>
            <input type="text" name="name" />
          </td>
        </tr>
        <tr>
          <td>性别:</td>
          <td>
            <input type="radio" name="sex" value="男" />男
            <input type="radio" name="sex" value="女" />女
          </td>
        </tr>
        <tr>
          <td>身份:</td>
          <td>
            <input type="radio" name="shenfen" value="报修人" />报修人
            <input type="radio" name="shenfen" value="维修员" />维修员
          </td>
        </tr>
        <tr>
          <td>年龄:</td>
          <td>
            <select name="1" id="age">
              <option value>1</option>
              <option value>2</option>age
              <option value>3</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>E-mail:</td>
          <td>
            <input type="text" name="e-mail" />
          </td>
        </tr>
        <tr>
          <td>Tel:</td>
          <td>
            <input type="text" name="phone" />
          </td>
        </tr>
        <tr>
          <td>QQ:</td>
          <td>
            <input type="text" name="qq_num" />
          </td>
        </tr>
        <tr>
          <td>地址:</td>
          <td>
            <select name="1" id="province">
              <option value>北京</option>
              <option value>上海</option>
              <option value>广东</option>
            </select>
            -
            <select name="1" id="city">
              <option value>汕头</option>
              <option value>广州</option>
              <option value>茂名</option>
              <option value>河源</option>
            </select>
          </td>
        </tr>
      </table>
      <button class="btn">修改</button>
      <button class="btn">返回</button>
    </div>
    <div class="line"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        age: "",
        address1: "",
        address2: "",
        shenfen: "",
        resource: "",
        desc: ""
      }
    };
  },
  methods: {
    onSubmit() {}
  }
};
</script>

<style lang="scss" scoped>
#container {
  .form {
    width: 30%;
    padding: 10px;
    background: #f5f5f5;
    .btn {
      border: none;
      color: #fff;
      width: 50px;
      line-height: 25px;
      margin: 5px;
      background: #888888;
    }
    .btn:hover {
      background: #a5a5a5;
    }
    .btn:active {
      background: #888888;
    }
  }
  /*分割线*/
  .line {
    width: 100%;
    border: 1px solid #888888;
    margin: 20px 0;
  }
}
</style>